<template>
  <div class="pro-list">
    <GoodProSearch @search="getProList" />
    <el-table :data="renderList" style="width: 100%">
      <el-table-column label="序号" width="70" type="index"></el-table-column>
      <el-table-column label="图片" width="80">
        <template #default="{ row }"><img :src="row.img1" width="60" /></template>
      </el-table-column>
      <el-table-column label="名称" prop="proname"></el-table-column>
      <el-table-column label="价格" width="100">
        <template #default="{ row }"> {{ row.originprice * row.discount }} / {{ row.discount }}</template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="{ row }">
          <el-button v-authority:disabled.superadmin link type="primary" size="small" @click="handleCheckDetail(row.proid)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pro-list__pagination">
      <el-pagination
        v-model:currentPage="count"
        v-model:page-size="limitNum"
        :page-sizes="[5, 10, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <GoodProDetail v-model:visible="detailVisible" :proid="activeProId" />
  </div>
</template>
<script>
import { getProSearchListApi } from '@/api/pro'
import GoodProDetail from '../GoodProDetail/index.vue'
import GoodProSearch from '../GoodProSearch/index.vue'

export default {
  name: 'AppGoodProSearchList',
  components: { GoodProDetail, GoodProSearch },
  data () {
    return {
      list: [],
      count: 1,
      limitNum: 5,
      total: 0,
      detailVisible: false,
      activeProId: ''
    }
  },
  computed: {
    renderList () {
      return this.list.slice((this.count - 1) * this.limitNum, this.count * this.limitNum)
    }
  },
  methods: {
    async getProList (category = '', search = '') {
      this.count = 1
      try {
        const data = await getProSearchListApi({ category, search })
        this.list = data
        this.total = data.length
      } catch (error) {}
    },
    handleSizeChange (limitNum) {
      this.count = 1
      this.limitNum = limitNum
    },
    handleCurrentChange (count) {
      this.count = count
    },
    handleCheckDetail (proid) {
      this.activeProId = proid
      this.detailVisible = true
    }
  },
  mounted () {
    this.getProList()
  }
}
</script>
<style scoped lang="scss">
.pro-list {
  &__pagination {
    padding: 16px;
    display: flex;
    justify-content: center;
  }
}
</style>